<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Metacar: A reinforcement learning environment for self-driving cars in the browser.</title>
  <link rel="icon" href="/public/img/icon.png">
  <link rel="stylesheet" href="/public/css/general.css">
  <link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
</head>
<body>

    <header>
      <div class="header_container">
        <h1><a href="/">Metacar</a></h1>
        <a href="https://github.com/thibo73800/metacar"><img src="/public/img/github-logo.png" /></a>
    </div>
    </header>

    <div class="canvas_container">
        <!--
          You just have to add a div with an ID as bellow and include the js to start
          using metacar.
        -->
      <div class="canvas" id="canvas"></div>
    </div>

    <div class="body_container">
      <h2>Metacar</h2>
      <h3>A reinforcement learning environment for self-driving cars in the browser.</h3>
      <pre><code data-language="javascript">  const env = new metacar.env("canvas", metacar.level.fullCity);<br>  env.load();</code></pre>
      <p>
        Learn how to start with metacar by reading the <a href="https://github.com/thibo73800/metacar">documentation</a>.
      </p>

      <br><br><br>
      <h3>Check out examples of algorithms created with <b>metacar</b></h3>
      <br><br><br>

      <div class="level_link_box" style="height: 300px;">
        <a href="/qtable.html"><img class="floatleft" src="/public/img/level0.png" /></a>
        <h4>
          <br><a href="/qtable.html">Discrete Actions</a>
        </h4>
        <p>
          Algorithm: <b>Q-learning with table</b> <br><br>
          In this example, the goal is to demonstrate a simple working example of a reinforcement learning 
          algorithm using the metacar environment. You can check out 
          <a href="/qtable.html">the demo</a> or take a look at the <a href="#">medium tutorial</a>.
        </p>
      </div>

      <div class="level_link_box" style="height: 298px;">
          <a href="/policy.html"><img class="floatright" src="/public/img/level1.png" /></a>
          <h4>
            <br><a href="/policy.html">Discrete Actions in traffic</a>
          </h4>
          <p>
            Algorithm: <b>Policy gradient algorithm based on Monte Carlo exploration (REINFORCE).</b> <br><br>

            The neural network is build using <a href="http://js.tensorflow.org">tensorflow.js</a>. Check out <a href="/policy.html"> the demo</a>.
            <br><br>
          </p>
        </div>

      <div class="level_link_box" style="height: 263px;">
          <a href="/ddpg.html"><img width="393px" class="floatleft" src="/public/img/ddpg.png" /></a>
          <h4>
            <br><a href="/ddpg.html">Continous Actions</a>
          </h4>
          <br>
          <ul style="margin:0;">
              <li><b>Deep Deterministic Policy Gradients (DDPG): <a href="https://arxiv.org/abs/1509.02971">paper</a></b> </li>
              <li><b>Parameter Space Noise for Exploration</b>: <a href="https://blog.openai.com/better-exploration-with-parameter-noise/">paper</a> </li>
          </ul>

          <p>
               The control is based on two continuous values for the throttle and steering angle of the car. 
               The model is made using <a href="http://js.tensorflow.org">tensorflow.js</a>
          </p>
        </div>


        <div class="level_link_box" style="height: 263px;">
            <a href="/ddpg-traffic.html"><img width="366px" class="floatright" src="/public/img/ddpg-traffic.png" /></a>
            <h4>
              <br><a href="/ddpg-traffic.html">Continous Actions in traffic</a>
            </h4>
            <br>
            <ul style="margin:0;">
                <li><b>Deep Deterministic Policy Gradients (DDPG): <a href="https://arxiv.org/abs/1509.02971">paper</a></b> </li>
                <li><b>Parameter Space Noise for Exploration</b>: <a href="https://blog.openai.com/better-exploration-with-parameter-noise/">paper</a> </li>
            </ul>
            <p>
                 The control is based on two continuous values for the throttle and steering angle of the car. 
                 The model is made using <a href="http://js.tensorflow.org">tensorflow.js</a>  
              <br><br>
            </p>
          </div>
  


        <div class="level_link_box" style="height: 261px;">
            <a href="/editor.html"><img class="floatleft" src="/public/img/editor.png" /></a>
            <h4>
              <br><a href="/editor.html">Create your own level!</a>
            </h4>
            <p>
              Metacar lets you edit your own level using the <a href="/editor.html">the editor</a>.
              Also, you’re more than welcome to <a href="https://github.com/thibo73800/metacar">contribute</a> to the project.
            </p>
        </div>

    </div>
  


    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
    <script src="/dist/metacar.min.js"></script>

    <script type="text/javascript" src="/public/js/index.js"></script>
</body>
</html>
